<div class="layui-carousel" id="ID-carousel-demo-1">
    <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>

<my-demo></my-demo>

<script>

    // target获取当前标签
    console.log("当前标签：", target)

    // document获取当前doc
    console.log("当前dom：", doc)

    // 生命周期组件钩子函数
    doc.hooks.onReady = function () {
        console.log("组件初次加载完毕")

        layui.use("comp", function () {
            let comp = layui.comp
            // 渲染组件
            comp.render({ tag: "my-banner", href: "/component/banner.html" })
        })

    }

    // 生命周期组件钩子函数
    doc.hooks.onChange = function (e) {
        console.log("组件切换完毕", e)
    }

    layui.use(function () {
        let carousel = layui.carousel
        let $ = layui.$
        // 渲染 - 常规轮播
        carousel.render({
            // jq绑定当前doc的#ID-carousel-demo-1
            elem: $('#ID-carousel-demo-1', doc)
        });
    });
</script>

<style>
    .layui-carousel div div:first-child {
        background-color: antiquewhite;
    }

    .layui-carousel div div:nth-child(2) {
        background-color: aqua;
    }

    .layui-carousel div div:nth-child(3) {
        background-color: aquamarine;
    }

    .layui-carousel div div:nth-child(4) {
        background-color: bisque;
    }

    .layui-carousel div div:last-child {
        background-color: brown;
    }
</style>